<template>
  <div>
      <h1>{{title}}({{len}})</h1>
      <div v-if="isEmpty">暂无数据</div>
      <ul>
          <template v-for="(item,index) in data">
              <li v-if="item.done ===done" :key="index">
                   <input type="checkbox" :checked="done" @click.prevent="boxClick(index,item)">
                   <input type="text" v-model="item.title">
                   <span>{{item.title}}</span>
                   <button @click="delClick(index,item)">删除</button>
          </li>
          </template>
          
          </ul>
  </div>
</template>

<script>
export default {
props:{
data:{

    type:Array,
    required:true
},
title:{
type:String,
default:'列表'
},
done:Boolean
},
methods:{
    boxClick(index,item){
        this.$emit('state',index,item)
    },
    delClick(index,item){
 this.$emit('remove',index,item)
    },
},
computed:{
    len(){
            return this.data.filter(item=>{
                return item.done === this.done
            }).length
        },
        isEmpty(){
            let list = this.data.filter(item=>{
                return item.done === this.done
            })
            return list.length <= 0
        }
}
}
</script>

<style scoped>
ul{
    list-style:none;
}
</style>